<template>
	<div class="advice">
		<div class="banner"></div>
		<div class="tab-box">
			<div class="tab-wrap">
				<div class="tab-menu">
					<div class="tab-item active">意见箱</div>
				</div>
			</div>
		</div>
		<div class="tab-content">
			<div class="content-wrap">
				<div class="personal-info">
					<fieldset>
						<legend>个人意见/建议</legend>
						<el-form ref="form" :model="form">
							<el-form-item>
								<el-input v-model="form.advice" type="textarea" :rows="15" placeholder="请输入内容"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="danger" @click="handleAdviceInfo()">保存</el-button>
							</el-form-item>
						</el-form>
					</fieldset>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'Advice',
	data() { 
		return {
			//个人意见
			form: {
				advice: ''
			}
		}
	},
	mounted() { 
		
	},
	methods: {
		/**
		 * 保存意见建议
		 */
		handleAdviceInfo() { 

		}
	}
}
</script>

<style lang="scss" scoped>
.advice {
	width: 100%;
	min-height: 760px;
	.banner {
		width: 100%;
		height: 140px;
		background-image: url('~@/assets/images/list-banner.png');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: -100px;
	}
	.tab-box {
		width: 100%;
		height: 60px;
		background-color: #fff;
		border-bottom: 1px solid #e0e0e0;
		.tab-wrap {
			display: flex;
			width: 1460px;
			height: 100%;
			margin: 0 auto;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}
		.tab-menu {
			display: flex;
			height: 100%;
			flex-direction: row;
			align-items: center;
			.tab-item {
				display: flex;
				font-size: 18px;
				font-weight: bold;
				width: 150px;
				text-align: center;
				transition: all .2s;
				cursor: pointer;
				letter-spacing: 2px;
				&.active {
					color: #a6292f;
					font-size: 20px;
				}
			}
		}
	}
	.tab-content {
		width: 100%;
		background: rgba(255,255,255, .9);
		.content-wrap {
			width: 1460px;
			margin: 0 auto;
			padding: 30px 0 50px 0;
		}
		.personal-info {
			fieldset {
				border-color: #a6292f;
				border-width: 1px;
				padding: 20px 20px 0;

			}
			legend {
				color: #a6292f;
			}
		}
	}
}
::v-deep .personal-info .el-textarea__inner {
	border-radius: 0;
}
::v-deep .el-button--danger {
	background-color: #a6292f !important;
	border-color: #a6292f !important;
}
</style>